<template>
    <div>
        <div class="nav">
            <!-- <span v-for="(item,index) in data" @click="select_num(item,index)" ref='targetElement_span' :style="{ backgroundColor: buttonColor}"  :class="{'bg-green-500':activeIndex === index}" :key="index"> {{ item }}</span> -->
            <span v-for="(item,index) in data"  @click="select_num(item,index)" ref='targetElement_span'   :class="[{'bg-green-500':activeIndex === index},{'bg-sky-blue':index_ === index}]" :key="index"> {{ item }}</span>
            <button @click="quite_">退出</button>
        </div>
        <div id="el_scroll">
            <div v-for="item in list"  class="select_num" ref='targetElement'>
                {{ item }}
                <div class="box_height">
                    以下是内容
                </div>
            </div>
        </div>
        
    </div>
</template>

<script setup>
    import {ref, watch } from "vue"
    import { router } from "../../route"
    import { useCommonStore } from '../../store/index'
    import { AES, enc} from 'crypto-js';

    const store = useCommonStore()
    console.log(store.num,store.token,store.userInfo)
    


    const data = [1,2,3,4,5]
    const list = [1,2,3,4,5]
    const targetElement = ref(null)
    const activeIndex = ref(null)
    const buttonColor = ref('')
    const current_num = ref('')
    const targetElement_span = ref(null)

    // 页面滑动导航跟随
    let docEl = document.documentElement;
    let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    window.addEventListener('scroll', function () {
        let docELHeight = docEl.scrollHeight;
        let scrollTop = docEl.scrollTop.toFixed(0);
        const el = targetElement_span.value;
        if (scrollTop > 4 && scrollTop < 624){
            el[1].setAttribute('class',"")
            el[2].setAttribute('class',"")
            el[3].setAttribute('class',"")
            el[4].setAttribute('class',"")
            el[0].setAttribute('class',"bg-green-500")
           
        }else if(scrollTop >624 && scrollTop < 1248){
            el[0].setAttribute('class',"")
            el[2].setAttribute('class',"")
            el[3].setAttribute('class',"")
            el[4].setAttribute('class',"")
            el[1].setAttribute('class',"bg-green-500")
        }else if(scrollTop > 1248 && scrollTop < 1872){    
            el[0].setAttribute('class',"")
            el[1].setAttribute('class',"")
            el[3].setAttribute('class',"")
            el[4].setAttribute('class',"")
            el[2].setAttribute('class',"bg-green-500")
        }else if(scrollTop > 1872 && scrollTop < 2366){    
            el[0].setAttribute('class',"")
            el[1].setAttribute('class',"")
            el[2].setAttribute('class',"")
            el[4].setAttribute('class',"")
            el[3].setAttribute('class',"bg-green-500")
        }else if(scrollTop > 2366){    
            el[0].setAttribute('class',"")
            el[1].setAttribute('class',"")
            el[2].setAttribute('class',"")
            el[3].setAttribute('class',"")
            el[4].setAttribute('class',"bg-green-500")
        }
        console.log(scrollTop)
        if (scrollTop == docELHeight - clientHeight) {
           console.log('到达底部了!');
        }
    });
    // 退出
    function quite_(){
        store.setToken('')
        router.push('/')
        console.log(234)
        console.log(store.token)
    }
    // 点击按钮滚动到指定位置
    function select_num(num,index){
        const el = targetElement.value;

        console.log(num + '被点击了')
        // 第一种将点击的按钮序号赋值给activeIndex
        activeIndex.value = index

        // 第er种通过style双向绑定
        // buttonColor.value = 'green'
        
        if(el){
            window.scrollTo({
            top: el[index].offsetTop,
            behavior: 'smooth'
          });
        }
    }

</script>

<style lang="less">
    body{
        margin: 0;
        padding: 0;
    }
    .nav{
        position: fixed;
        top: 5px;
        left: 10px;
        span{
            /* background-color: rgb(112, 113, 111); */
            padding: 0 20px;
            margin-top: 2px;
            display: block;
            /* pointer-events: none; */
            cursor: pointer;
            /* 隐藏光标 */
            caret-color: transparent;
        }
    }
    
    .box_height{
        height: 600px;
    }
    .bg-green-500{
        background-color: green;
    }
</style>